<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/blog_lists.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <div class="nav">
        <img src="image/ikun2.jpg" alt="坤坤消失了">
        <span class="title">ikun的博客系统</span>
        <span class="spacer"></span><!--用于占位布局将头像与链接左右分隔-->
        <a href="#">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="loginOut">注销</a>
    </div>

    <div class="container">
        <div class="container-left">
            <div class="card">
                <img src="image/ikun3.jfif" alt="下蛋">
                <h4>鸽鸽</h4>
                <a href="#" class="gitee">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>--</span>
                    <span>--</span>
                </div>

            </div>
        </div>


        <div class="container-right">
            <!-- <div class="blog">
                <div class="title">第一篇</div>
                <div class="date">2022-09-15</div>
                <div class="desc">ajgdusyjhgddjkhfgtur adipisicing elit. Incidunt amet nobis sed assumenda laboriosam nam ex cupiditate sequi ullam dolorek djhgkjfh gjkfhg jkhfk jghkjfh gjkfhgk jhfkjhgk jfhgk jfhgkj fhk usygf udys  gfudygfuhydgfuh gdjhfgdjhg fjdhsg fjhds fjhdsg ujhdgj hfgjhf jhgj fhgjfbg jhdfj</div>
                <a href="#">查看全文</a>
            </div> -->


        </div>
        </div>

<!--    构造ajax请求，向服务器发送GET请求，获取博客的所有文章信息-->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="js/checkLogin.js"></script>
    <!-- <script>
         function getBlogList(){
            $.ajax({
            type:'get',
            url:'blog',
            success:function(body){
                let container=document.querySelector('.container-right')
                for(let blog of body){
                let blogDiv=document.createElement('div');
                blogDiv.className = 'blog';
                // 创建标题
                let titleDiv = document.createElement('div');
                titleDiv.className = 'title';
                titleDiv.innerHTML = blog.title;
                blogDiv.appendChild(titleDiv);
                //创建日期
                let dateDiv=document.createElement('div')
                dateDiv.className='data';
                dataDiv.innerHTML=blog.postTime;
                blogDiv.appendChild(dateDiv);
                //创建内容
                let descDiv=document.createElement('div')
                descDiv.className='desc';
                descDiv.innerHTML=blog.content;
                blogDiv.appendChild(descDiv);
                //创建查看连接
                let a = document.createElement('a');
                a.innerHTML = '查看全文 >>';
                a.href = 'blog_detail.html?blogId=' + blog.blogId;
                blogDiv.appendChild(a);
               // 把 blogDiv 加入外层元素
               container.appendChild(blogDiv);
                }
            }
        });
        
       
         
    } -->
    <script>
        // 通过这个函数, 来从服务器获取到博客列表的数据
        function getBlogs() {
            $.ajax({
                type: 'get',
                url: 'blog',
                success: function(body) {
                    // 根据返回的 json 数据, 来构造出页面内容, div.blog
                    // jquery ajax 会自动的把响应得到的 body 按照响应的 Content-Type 进行转换格式. 
                    // 如果响应的 Content-Type 是 json, 此时就会自动把 body 转成 js 的对象
                    let container = document.querySelector('.container-right');
                    for (let blog of body) {
                        let blogDiv = document.createElement('div');
                        blogDiv.className = 'blog';
                        // 创建博客标题
                        let titleDiv = document.createElement('div');
                        titleDiv.className = 'title';
                        titleDiv.innerHTML = blog.title;
                        blogDiv.appendChild(titleDiv);
                        // 创建日期
                        let dateDiv = document.createElement('div');
                        dateDiv.className = 'date';
                        dateDiv.innerHTML = blog.postTime;
                        blogDiv.appendChild(dateDiv);
                        // 创建摘要
                        let descDiv = document.createElement('div');
                        descDiv.className = 'desc';
                        descDiv.innerHTML = blog.content;
                        blogDiv.appendChild(descDiv);
                        // 创建查看全文按钮
                        let a = document.createElement('a');
                        a.innerHTML = '查看全文 >>';
                        a.href = 'blog_detail.html?blogId=' + blog.blogId;
                        blogDiv.appendChild(a);
                        // 把 blogDiv 加入外层元素
                        container.appendChild(blogDiv);
                    }
                }
            });

        }


        function getInfor(){
            $.ajax({
                type:'get',
                url:'userInfor',
                success:function(body){
                    let h4=document.querySelector('.card h4');
                    h4.innerHTML=body.userName;
                }
            });
        }
        
        getInfor();
            
        getBlogs();

        checkLogin();
    </script>
    <!-- //getBlogList(); -->
    </script>

</body>
</html>